import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Upload, Select, Space, notification, DatePicker } from 'antd';
import "../../Index/CXY/styles/consultedit.scss"
import { PlusOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import * as service from "../../../api/System"

interface Props {

}
const { TextArea } = Input;
function SystemConsutEdit(props: Props) {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [kind, setKind] = useState("")
    var location = useLocation()
    const [form] = Form.useForm()

    useEffect(() => {
        if (location.state.type == "edit") {
            form.setFieldsValue(location.state.row)
        }

    }, [])
    let time = new Date()
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // console.log(location.state.row.newsId);
        if (location.state.type == "edit") {
            service.consut_update({
                newsId: location.state.row.newsId,
                newsName: values.newsName,
                newsPicture: "https://image.16pic.com/00/93/59/16pic_9359773_s.png?imageView2/0/format/png",
                newsType: values.newsType,
                newsContent: values.newsContent,
                newsTime: time,
                // newsTime: time,
                newsCollection: "130",
                journalName: "李明明",
                newsState: true
            }).then((res) => {
                console.log(res);
                notification.success({
                    placement: "top",
                    message: "编辑成功！"
                })
                navigate("/index/system-consult")
            })
        } else {
            service.consut_add({
                newsName: values.newsName,
                newsPicture: "https://image.16pic.com/00/93/59/16pic_9359773_s.png?imageView2/0/format/png",
                newsType: values.newsType,
                newsContent: values.newsContent,
                newsTime: time,
                // newsTime: time,
                newsCollection: "130",
                journalName: "李明明",
                newsState: true
            }).then((res) => {
                console.log(res);
                notification.success({
                    placement: "top",
                    message: "新增成功！"
                })
                navigate("/index/system-consult")
            })
        }
    };

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        setKind(value)
    };
    const back = () => {
        navigate(-1)
    }
    // var handelChange = (e: any) => {
    //     console.log(e.target.files[0]);
    //     // 将文件对象转换为base64编码后的字符串
    //     // FileReader专门负责读取文件内容，转换为其他格式
    //     var reader = new FileReader();
    //     reader.readAsDataURL(e.target.files[0])
    //     reader.onload = function(){
    //         console.log(this.result);
    //         //this.result 拿到的是所选中的文件的全部内容(以base64编码格式显示的字符串)
    //         // setImg('sdfsdfsdfsdf')
    //         form.setFieldValue('img',this.result);
    //     }
    // }
    return (
        <div className='consultedit'>
            <h4>文章管理</h4>
            <h5>文章信息</h5>
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                onFinish={onFinish}
            >
                <Form.Item
                    label="newsId"
                    name="newsId"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="文章标题"
                    name="newsName"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="操作人"
                    name="journalName"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>

                <Form.Item label="列表图片" valuePropName="newsPicture">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>上传图片</div>
                        </div>
                    </Upload>
                </Form.Item>

                <Form.Item label="文章分类" name="newsType">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleChange}
                        placeholder="请选择"
                        options={[
                            { value: '请选择', label: '请选择' },
                            { value: '健康头条', label: '健康头条' },
                            { value: '慢病护理', label: '慢病护理' },
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    label="收藏量"
                    name="newsCollection"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    label="操作时间"
                    name="newsTime"
                    hidden
                >
                    <Input placeholder='请输入' />
                    {/* <DatePicker showTime onChange={onChange} onOk={onOk} /> */}
                </Form.Item>
                <Form.Item
                    label="发布状态"
                    name="newsState"
                    hidden
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item label="文章内容" name="newsContent">
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
                    <Space>
                        <Button style={{ marginTop: 20 }} type="primary" htmlType="submit">
                            发布
                        </Button>
                        <Button onClick={() => { back() }} style={{ marginTop: 20 }} type="default">
                            返回
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    );
}

export default SystemConsutEdit;